import { useEffect, useInsertionEffect } from "react";
import { useState, useRef, useLayoutEffect } from "react";
import axios from "axios";
function App() {
  const [proList, setProList] = useState([]);
  const [count, setCount]=useState(1)
  const timeRef = useRef(null);

  //这样相当于生命周期的挂载阶段，第二种使用相当于更新阶段
  // useEffect( () => {
  //   axios.get("http://121.89.205.189:3000/api/pro/list?count="+count).then((res) => {
  //     setProList(res.data.data);
  //   })
  //   //在useEffect不要修改依赖项的值，会造成死循环

  //   //async会默认给返回值
  //   //可以配置多个依赖
  // }, [count]//监听count变化，是一个依赖数组，只有依赖项发生变化，才会重新执行
  // );


  // 第三种全更新阶段，任何数据发送变化都会执行
  // useEffect(()=>{
  //   console.log('66666');
  // })

  // 第四种可以在useEffect配置返回值，返回一个函数，在该函数进行副作用的清除
  useLayoutEffect(()=>{
    // console.log('66666----'+count);
    timeRef.current= setInterval(()=>{
      console.log('55555----'+count);
    },2000)
    return ()=>{
      //该函数会在下一次执行useEffect之前被调用
      //用来清除副作用的函数，即异步操作
      // console.log('88888----'+count);
      clearInterval(timeRef.current)
    }
  },[count])


    

  return (
    <div>
      <h1>APP</h1>
      <button onClick={()=>{
        setCount(count+1)
      }}>点击下一页</button>
      <ol>
      {proList && proList.map((item) => {
        return  <li key={item.proid}>{item.proname}</li>
      })}
      </ol>
    </div>
  );
}

export default App;
